import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
let root = null
function render() {
  const container = document.getElementById('root')
  root = ReactDOM.createRoot(container);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
}

// 使用 webpack 运行时 publicPath 配置
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

// 独立运行微应用
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 定义子组件的协议
export async function bootstrap (props) {
  console.log('react 子应用 bootstrap', props)
}
export async function mount (props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log('%c 子应用中监听 global state', 'font-size: 18px; color: #6666FF', state, prev);
  }, true)
  React.$globalStateChange = props.onGlobalStateChange
  React.$setGlobalState = props.setGlobalState
  console.log('react 子应用 mount', props)
  render(props)
}
export async function unmount (props) {
  root.unmount()
}
